<template>
    <section>
        <div class="view border-container">
            <div class="left display">{{ String(mine.getLevel.mine - mine.mark).padStart(3, '0') }}</div>
            <div class="middle" @click="mine.reset()">重玩</div>
            <div class="right display">{{ String(timer).padStart(3, "0") }}</div>
        </div>
        <div class="game-box border-container">
            <Blocks />
        </div>
    </section>
</template>

<script setup lang="ts">
import mineStore from '@/store/mine'
import { ref, watch } from 'vue'
import Blocks from '@/compoents/blocks.vue'

const mine = mineStore()
const timer = ref(0)
const stl = ref()

watch(mine, (val) => {
    if (val.play && !val.over && !stl.value) {
        console.log('start')
        stl.value = setInterval(() => {
            timer.value++
        }, 1000)
    }
    if (!val.over && !val.play) {
        clearInterval(stl.value)
        stl.value = undefined
        timer.value = 0
    }
    if (val.over && !val.play && stl.value) {
        clearInterval(stl.value)
    }
})
</script>

<style lang="scss" scoped>
section {
    margin-top: 10px;

    .view {
        height: 45px;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .display {
            width: 50px;
            height: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000;
            color: red;
            font-size: 16px;
            letter-spacing: 2px;
            border-width: 2px;
            border-style: solid;
            border-left-color: var(--border-color-dark);
            border-top-color: var(--border-color-dark);
            border-right-color: var(--border-color-light);
            border-bottom-color: var(--border-color-light);
        }

        .middle {
            border-width: 2px;
            border-style: solid;
            border-left-color: var(--border-color-light);
            border-top-color: var(--border-color-light);
            border-right-color: var(--border-color-dark);
            border-bottom-color: var(--border-color-dark);
            padding: 2px 6px;
            font-size: 14px;
            letter-spacing: 2px;

            &:active {
                border-left-color: var(--border-color-dark);
                border-top-color: var(--border-color-dark);
                border-right-color: var(--border-color-light);
                border-bottom-color: var(--border-color-light);
            }
        }
    }

    .game-box {
        background-image: linear-gradient(180deg, transparent calc(100% - 1px), var(--border-color) calc(100% - 1px)),
            linear-gradient(90deg, transparent calc(100% - 1px), var(--border-color) calc(100% - 1px));
        background-size: var(--block-side) var(--block-side);
        margin-top: 10px;
    }
}
</style>